<!-- 数据看板 -->
<template>
  <div class="data-kanban-container">
    <!-- 跳转到数据大屏的悬浮box -->
    <div class="data-screen-jump cursor-pointer" @click="jumpkanban">
      <p class="data-screen-image"></p>
      <div>
        <h3 class="white text-center font-size14">数据大屏</h3>
        <p class="white text-center">
          <span class="font-size16">Go</span>
          <span class="triangle-right align-center"></span>
        </p>
      </div>
    </div>
    <!-- 筛选条件 -->
    <a-card>
      <a-form layout="inline" :model="formState">
        <a-form-item class="width200">
          <a-select
            placeholder="请选择小程序"
            v-model:value="formState.applet"
            :options="appletData"
            @change="appletHandle"
          >
          </a-select>
        </a-form-item>
        <a-form-item class="width200">
          <a-select
            v-model:value="formState.activities"
            :options="activitiesData"
            @change="activitiesHandle"
            placeholder="请选择活动"
          >
          </a-select>
        </a-form-item>
        <!-- 日期 -->
        <a-form-item>
          <a-range-picker
            format="YYYY-MM-DD"
            :allowClear="false"
            v-model:value="formState.rangedate"
            :ranges="dateRanges"
            :disabledDate="disabledDate"
            @change="dateHandle"
          />
        </a-form-item>
      </a-form>
    </a-card>
    <!-- 关键指标 -->
    <base-card
      class="content-card"
      title="关键指标"
      :describe="updateTime"
      :tips="keyTips"
      :bordered="false"
    >
      <a-row class="key-indicators">
        <a-col class="key-item" :span="8" v-for="item in keyIndexData" :key="item.id">
          <h1 class="key-item-title">{{ item.title }}</h1>
          <div class="visitor-box">
            <div class="img-box">
              <img :src="item.imgSrc" />
            </div>
            <div class="visitor-content">
              <p class="total-num-box">
                合计<span class="total-num">{{ item.totalNum }}</span
                >人
              </p>
              <p class="yestoday-num-box">
                昨日<span class="yestoday-num">{{ item.yestodayNum }}</span
                >人
              </p>
            </div>
          </div>
        </a-col>
      </a-row>
    </base-card>
    <!-- 效果活动 -->
    <base-card class="content-card" title="效果洞察" :bordered="false">
      <div class="effect-activity">
        <h2 class="float-left effect-title">Top10 互动活动</h2>
        <a-radio-group calss="float-right" v-model:value="effectVal" @change="effectHandle">
          <a-radio-button value="hdyx_uv">访问人数</a-radio-button>
          <a-radio-button value="hdyx_join_uv">入会人数</a-radio-button>
        </a-radio-group>
        <div class="effect-box">
          <base-charts v-if="effectStatus" :options="effectOptions"></base-charts>
          <a-empty style="margin-top: 160px" v-if="!effectStatus" :image="simpleImage" />
        </div>
      </div>
    </base-card>
    <!-- 事件概览 -->
    <base-card class="content-card" title="事件概览">
      <div class="event-box">
        <base-charts v-if="eventStatus" :options="eventOptions"></base-charts>
        <a-empty style="padding-top: 160px" v-if="!eventStatus" :image="simpleImage" />
      </div>
    </base-card>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref, UnwrapRef, onMounted } from "vue";
import moment, { Moment } from "moment";
import BaseCard from "../../../components/base-card/index.vue";
import BaseCharts from "../../../components/base-charts/index.vue";
import { formatDateTime } from "../../../utils/date";
import { useRouter } from "vue-router";
import { message, Empty } from "ant-design-vue";
import { originEffectOptions, originEventOptions } from "../../common/echartOption";
import BaseData from "./baseData";
import useAppletData from "./market-data-helper/useAppletData";
import useActListData from "./market-data-helper/useActListData";
import useKeyIndexData from "./market-data-helper/useKeyIndexData";
import useEffectInsightData from "./market-data-helper/useEffectInsightData";
import useEventOverviewData from "./market-data-helper/useEventOverviewData";

interface FormState {
  applet: string;
  activities: string;
  rangedate: [Moment, Moment];
}
export default defineComponent({
  components: {
    BaseCard,
    BaseCharts
  },
  setup() {
    const currentDate = formatDateTime(new Date());
    const updateTime = ref(`更新时间：${currentDate}`);
    const router = useRouter();
    const { appletData } = useAppletData();
    const formState: UnwrapRef<FormState> = reactive({
      applet: "",
      activities: "",
      rangedate: [moment(new Date()), moment(new Date())]
    });
    let keyIndexData = ref(BaseData.kanbanKeyIndexData);
    let effectOptions = ref(originEffectOptions);
    let eventOptions = ref(originEventOptions);
    //效果洞察
    const effectVal = ref("hdyx_uv");
    const effectStatus = ref<boolean>(false);
    //事件概览
    let eventStatus = ref<boolean>(false);
    // 文字提示
    const keyTips = "true";
    //跳转到数据看板
    const jumpkanban = () => {
      router.push("/screen");
    };
    //只能选择前20天的时间
    const disabledDate = (currentDate: any) => {
      if (!currentDate) {
        return false;
      } else {
        return currentDate > moment();
      }
    };
    //请求数据
    const fetchData = async () => {
      //关键指标
      let keyIndex: any = await useKeyIndexData(formState, "kanbanPage");
      keyIndexData.value = keyIndex;
      //效果洞察
      let effectResult: any = await useEffectInsightData(formState, effectVal);
      //effectOptions.value = effectResult.effectOptions;
      effectStatus.value = effectResult.effectStatus;
      effectOptions.value.yAxis.data = effectResult.effectOptions.yAxis.data;
      effectOptions.value.series[0].data = effectResult.effectOptions.series[0].data;
      //事件概览
      let eventResult: any = await useEventOverviewData(formState);
      //eventOptions.value = eventResult.eventOptions;
      eventStatus.value = eventResult.eventStatus;
      eventOptions.value.xAxis[0].data = eventResult.eventOptions.xAxis[0].data;
      eventOptions.value.series[0].data = eventResult.eventOptions.series[0].data;
      eventOptions.value.series[1].data = eventResult.eventOptions.series[1].data;
      eventOptions.value.series[2].data = eventResult.eventOptions.series[2].data;
      eventOptions.value.series[3].data = eventResult.eventOptions.series[3].data;
      eventOptions.value.series[4].data = eventResult.eventOptions.series[4].data;
      eventOptions.value.series[5].data = eventResult.eventOptions.series[5].data;
    };
    const { activitiesData } = useActListData(formState, fetchData);
    //选择小程序之后
    const appletHandle = () => {
      //重置全部活动数据
      formState.activities = "";
      //重置全部活动下拉数据
      activitiesData.value = [];
      fetchData();
    };
    //选完活动之后
    const activitiesHandle = () => {
      //选择小程序 和活动之后调用接口
      fetchData();
    };
    const dateHandle = () => {
      let startTime = formState.rangedate[0].format("YYYY-MM-DD");
      let endTime = formState.rangedate[1].format("YYYY-MM-DD");
      //得到时间戳为s unix()到现在的总s数
      let startTimeStamp = moment(`${startTime} 00:00:00`).unix();
      let endTimeStamp = moment(`${endTime} 00:00:00`).unix();
      //求开始日期到结束日期相差的天数，如果超过20，就给予提示
      let timeDifference = (endTimeStamp - startTimeStamp) / (60 * 60 * 24);
      if (timeDifference > 20) {
        message.warning("最多支持查询20天");
        formState.rangedate = [moment(new Date()), moment(new Date())];
      } else {
        fetchData();
      }
    };
    //效果洞察标签切换
    const effectHandle = async () => {
      //console.log("effectVal",effectVal.value);
      let effectResult: any = await useEffectInsightData(formState, effectVal);
      console.log("effectResult", effectResult);
      if (effectVal.value === "hdyx_uv") {
        effectOptions.value.series[0].name = "访问人数";
      }
      if (effectVal.value === "hdyx_join_uv") {
        effectOptions.value.series[0].name = "入会人数";
      }

      effectOptions.value.yAxis.data = effectResult.effectOptions.yAxis.data;
      effectOptions.value.series[0].data = effectResult.effectOptions.series[0].data;
    };
    onMounted(() => {
      fetchData();
    });
    return {
      simpleImage: Empty.PRESENTED_IMAGE_SIMPLE,
      updateTime,
      formState,
      dateRanges: {
        昨日: [moment().subtract(1, "days"), moment().subtract(1, "days")],
        今日: [moment(), moment()],
        近7日: [moment().subtract(6, "days"), moment()],
        近20日: [moment().subtract(19, "days"), moment()]
      },
      appletData,
      activitiesData,
      keyTips,
      //关键指标
      keyIndexData,
      //效果洞察
      effectStatus,
      effectVal,
      effectOptions,
      // 事件概览
      eventStatus,
      eventOptions,
      //事件
      appletHandle,
      activitiesHandle,
      jumpkanban,
      disabledDate,
      dateHandle,
      effectHandle
    };
  }
});
</script>

<style lang="less">
//设置抽屉的宽度
.ant-tooltip-inner {
  width: 620px;
}
</style>
<style lang="less" scoped>
h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 0;
  padding: 0;
}

.data-kanban-container {
  .triangle-right {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 6px;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 5px solid #fff;
  }

  position: relative;

  .data-screen-jump {
    position: fixed;
    top: 200px;
    right: 0;
    z-index: 999;
    width: 84px;
    height: 80px;
    padding: 25px 10px 0 10px;
    background-image: linear-gradient(to right, #9d8cf6, #5a4eb1);
    border-radius: 8px;

    .data-screen-image {
      position: absolute;
      top: -20px;
      left: 22px;
      width: 40px;
      height: 40px;
      background-image: url("../../../assets/back-img/dashboard/data-screen-jump.png");
      background-repeat: no-repeat;
      background-position: top;
      background-size: 100% 100%;
    }
  }
}

.width200 {
  width: 200px;
}

.width300 {
  width: 300px;
}

.height50 {
  height: 50px;
  line-height: 50px;
}

.height80 {
  height: 80px;
  line-height: 80px;
}

.height30 {
  height: 30px;
  line-height: 30px;
}

.content-card {
  margin-top: 15px;

  .key-indicators {
    .key-item {
      margin: 0 0 -1px -1px;
      padding: 24px;
      border: 1px solid #e7eaed;

      .visitor-box {
        display: flex;
        margin-top: 10px;

        .img-box {
          width: 44px;
          height: 44px;
          margin-top: 10px;

          img {
            width: 100%;
            height: 100%;
          }
        }

        .visitor-content {
          flex: 1;
          margin-left: 12px;

          .total-num {
            margin: 0 8px;
            color: #333;
            font-size: 24px;
            //font-family: "HelveticaNeue-Medium","HelveticaNeue";
          }

          .yestoday-num {
            margin: 0 7px;
            color: #333;
            font-size: 14px;
            //font-family: "PingFangSC-Semibold","PingFang SC";
          }
        }
      }

      .key-item-title {
        color: #333;
        font-size: 16px;
        //font-family: "PingFangSC-Medium", "PingFang SC";
      }
    }
  }
}

.event-box {
  width: 100%;
  height: 400px;
}

.effect-box {
  height: 400px;
}

.effect-activity {
  height: 400px;
  //padding-bottom: 50px;

  .effect-title {
    height: 32px;
    margin-right: 20px;
    line-height: 32px;
  }
}

.map-box {
  width: 100%;
  height: 600px;
}
</style>
